<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>大唐微科集团</title>
	</head>
	<style type="text/css">
		.nav-item{
			padding: 21px 12px;
		}
		.nav-link{
			padding:4px 7px;
		}
		.navbar-header{
			margin-left:17px;
			width:22%;
		}
		.hover_ul{
			position: absolute;
		    top:77%;
		    display: none;
		}
		.hover_li{
			width:127%;
			display: flex;
			justify-content: center;
			line-height:37px;
			color:#010101;
			background:#fff;
			border-bottom:1px solid rgba(238,238,238,1);
		}
		.hover_li a{
			padding: 0;
			width:100%;
			text-align:left;
			margin-left:16%;
			float: left;
		}
		.hover_li:last-child{
			border-bottom:0;
		}
		.hover_li:hover{
			background:#003793;
			cursor: pointer;
			color: #fff;
		}
		.hover_li:hover a{
			color:#fff;
		}
		.slicknav_nav{
			display: none;
		}
		@media only screen and (min-width: 768px) and (max-width:992px) {
			.nav-item {
			    padding: 0 5px;
			}
		}
		@media only screen and (max-width: 991px) and (min-width: 768px){
			#main-menu #ul_header a {
			    padding: 0 10px;
			    margin-left:4%;
			}
		}
		@media only screen and (max-width: 767px) and (min-width: 480px){
			.navbar-header {
			    width: 100%;
			}
		}
		@media screen and (max-width: 767px){
			.navbar-brand {
			    width: 22%;
			}
		}
		@media only screen and (min-width: 320px) and (max-width: 480px) {
			.navbar-header{
				margin-left:0;
				width: 100%;
			}
			.navbar-brand {
			    position: absolute;
			    top: 6px;
			    width: 35%;
			}
		}
	</style>
	<body>
		<nav class="navbar navbar-expand-md fixed-top scrolling-navbar nav-bg" id="head">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
              <img src="assets/img/logo.png" alt="">
            </a>
          </div>
          <div class="collapse navbar-collapse" id="main-menu">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
              <li class="nav-item">
                <a class="nav-link active" href="index.html">首页</a>
              </li>
              <li class="nav-item dropdown home_hover">
                <a class="nav-link dropdown-toggle" href="about.html">关于微科</a>
                <ul class="hover_ul header_ul" id="ul_header">
					<li class="hover_li" v-for="(item,index) in liAboutInfo" @click="aboutBtn(item.id,index)">
						<a class="dropdown-toggle">{{item.classifiedsName}}</a>
					</li>
				</ul>
              </li>
              <li class="nav-item dropdown home_hover">
                <a class="nav-link dropdown-toggle" href="Industrial.html">产业布局</a>
                <ul class="hover_ul header_ul" id="ul_header">
					<li class="hover_li" v-for="(items,index) in liIndustInfo" @click="inductBtn(items.id,index)">
						<a class="dropdown-toggle" >{{items.classifiedsName}}</a>
					</li>
				</ul>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="investment.html">产融投资</a>
              </li>
              <li class="nav-item dropdown home_hover">
                <a class="nav-link dropdown-toggle" href="news.html">新闻媒体</a>
                <ul class="hover_ul header_ul" id="ul_header">
					<li class="hover_li" v-for="(item,index) in liListInfo" @click="headBtn(item.id,item.classifiedsName,index)">
						<a class="dropdown-toggle">{{item.classifiedsName}}</a>
					</li>
				</ul>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="ContactUs.html">联系我们</a>
              </li>
            </ul>
          </div>
          <!-- Mobile Menu Start -->
          <ul class="slicknav_nav" aria-hidden="false" role="menu">
          	<li><a href="index.html" class="active" role="menuitem" tabindex="0">首页</a></li>
          	<li><a href="about.html" role="menuitem" tabindex="0">关于微科</a></li>
          	<li v-for="(item,index) in liAboutInfo" @click="aboutBtn(item.id,index)"><a role="menuitem" tabindex="0">{{item.classifiedsName}}</a></li> 
          	
          	<li><a href="Industrial.html" role="menuitem" tabindex="0">产业布局</a></li> 
          	<li v-for="(items,index) in liIndustInfo" @click="inductBtn(items.id,index)"><a role="menuitem" tabindex="0">{{items.classifiedsName}}</a></li>  
          	
          	<li><a href="investment.html" role="menuitem" tabindex="0">产融投资</a></li> 
          	<li><a href="news.html" role="menuitem" tabindex="0">新闻媒体</a></li> 
          	<li v-for="(item,index) in liListInfo" @click="headBtn(item.id,item.classifiedsName,index)"><a role="menuitem" tabindex="0">{{item.classifiedsName}}</a></li> 
          	
          	<li><a href="ContactUs.html" role="menuitem" tabindex="0">联系我们</a></li> 
          </ul>
          <ul class="wpb-mobile-menu">
            
          </ul>
        </div>
      </nav>
	</body>
	<script type="text/javascript" src="assets/js/jquery-min.js" ></script>
	<script type="text/javascript" src="assets/js/jquery.slicknav.js" ></script>
	<script type="text/javascript" src="assets/js/vue.js" ></script>
	<script type="text/javascript" src="assets/js/vue-resource.js" ></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#head',
			data(){
				return{
					liListInfo : '',
					liIndustInfo : '',
					liAboutInfo : '',
				}
			},
			created(){
				this.headInfo();
				this.industrInfo();
				this.aboutveek();
			},
			methods:{
				headInfo(){
					var _this = this;
					this.$http.get(URL + 'sysnewsclassifies').then(function(obj){
						if(obj.body.code == 'success'){
							_this.liListInfo = obj.body.data
						}
					})
				},
				headBtn(id,headName,subscript){
					window.location.href = 'news_list.html?newsId=' + id + '&newsName=' + headName + '&number=' + subscript 
				},
				//产业布局
				industrInfo(){
					var _this = this;
					this.$http.get(URL + 'externalclassifies').then(function(data){
						if(data.body.code == 'success'){
							if(data.body.data.length > 0){
								_this.liIndustInfo = data.body.data
							}
						}
					})
				},
				inductBtn(id,index){
					window.location.href = 'Countychain.html?countyId=' + id + '&countyIndex=' + index
				},
				//关于微科
				aboutveek(){
					var _this = this;
					this.$http.get(URL + 'dtveekclassifies').then(function(data){
						if(data.body.code == 'success'){
							if(data.body.data.length > 0){
								_this.liAboutInfo = data.body.data
							}
						}
					})
				},
				aboutBtn(id,index){
					window.location.href = 'introduction.html?AboutId=' + id + '&AboutIndex=' + index
				}
			}
		})
		$('.navbar-header').click(function(){
			if($('.slicknav_nav').is(":hidden")){
				$('.slicknav_nav').slideDown()
				$('.nav-bg').css('background','#fff')
			}else{
				$('.slicknav_nav').slideUp();
				setTimeout(function(){
					$('.nav-bg').css({'background':'url(assets/img/banner_bg.png) no-repeat','background-position':'bottom','background-color':'#fff'})
				},300)
			}
		})
		$('.home_hover').each(function(){
			$(this).mouseover(function(){
				$(this).find('.hover_ul').show();
			}).mouseout(function (){
				$(this).find('.hover_ul').hide();
			});
		})
		$(document).ready(function () {
            $('.nav-link').each(function () {
                if ($($(this))[0].href == String(window.location)){
                	$(".nav-link").removeClass("active")
                	$(this).addClass('active').attr('href', 'javascript:void(0);');
                }
            })
            $('.nav-item .hover_li a').each(function(index){
            	if ($($(this))[0].href == String(window.location)){
            		$(".nav-link").removeClass("active")
            		$(this).parent().parent().parent().find('.nav-link').addClass('active').attr('href', 'javascript:void(0);');
            	}
            })
        });
        $('.wpb-mobile-menu').slicknav({
		    prependTo: '.navbar-header',
		    parentTag: 'liner',
		    allowParentLinks: true,
		    duplicate: true,
		    label: '',
		    closedSymbol: '<i class="fa fa-angle-right"></i>',
		    openedSymbol: '<i class="fa fa-angle-down"></i>',
		});
	</script>
</html>
